<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="/xzb/css/weui.min.css">
    <link rel="stylesheet" href="/xzb/css/example.css">
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript" src="/xzb/js/jquery.min.js?t=0.1243"></script>

    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
        }
        .wrap{
            width:100%;
            height:100%;
        }
        /*37.5*/
        .head{ padding-top:2.12rem;background-color: #F9F9F9;}
        .main{background-color: #F9F9F9;}
        .head_title{
            font-size: 3rem;
            font-weight:bold;
            text-align: center;
        }
        .head_total{
            width:100%;
            margin-top:0.8rem;
            margin-bottom: 2.12rem;
            font-size:2.5rem;
            height:2.4rem;
            line-height:2.4rem;
        }
        .head_grade{
            float: left;
            margin-left: 2.12rem;


        }
        .group_grade{
            float:right;
            margin-right:1.08rem;
        }
        .all_grade{

        }
        .head_rules{
            float:right;
            margin-right:1.6rem;
            color:#6EA9D6;

        }
        .title{
            width:100%;
            background-color:#F2F2F3;
            font-size:3rem;
            box-sizing: border-box;
            padding:0.53em 0 0.53em 1.08rem;
        }
        .item{
            box-sizing: border-box;
            padding: 1.08em 1.08rem;
            margin-top:1.08rem;
        }
        .item_title{
            box-sizing: border-box;
            padding:0.54em 0;
            font-size:2.5rem;
        }
        .img_box{
            position: relative;
            display: inline-block;
            margin-right:1.08rem;
            margin-bottom:1.08rem;
        }
        .imgs{
            width:17rem;
            height:17rem;
            display:inline-block;

        }
        .img_fail{
            position: absolute;
            background-color:#F56C6C;
            color:#fff;
            right:0;
            bottom: 8rem;
            font-size: 2rem;
            padding:0 1.44rem;
            border-radius:0.54rem;
        }
        .img_succ{
            position: absolute;
            background-color:#67C23A;
            color:#fff;
            right:0;
            bottom: 8rem;
            font-size: 2rem;
            padding:0 1.44rem;
            border-radius:0.54rem;
        }
        .img_name{
            text-align:center;
            font-size:2rem;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            width:17rem;
            height: 3.2rem;
        }


        .item_warn{
            display:none;
        }
        .class_group{
            box-sizing: border-box;

        }
        .class_name{
            padding:0.54em 1.86em 0.54rem;
            font-size: 2.5em
        }

        .release{
            width:100%;
            background-color:#fff;
            z-index:1001;
            height:auto;

        }
        .release .modal_title{
            text-align: center;
            font-size: 4rem;
            padding-top: 0.8rem;
        }
        .release .tip{
            box-sizing: border-box;
            padding:0.54rem 1.08rem;
            color:#6e6e6e;
            font-size:3rem;
        }
        .release .example{
            min-height:10.66rem;
        }
        .release .swiper{
            height:10.66rem;
        }
        .upload_btn{
            margin:0.54rem 0 1.08rem 0;
            display:flex;
            display:-webkit-flex;
        }
        .btn{
            margin: 1.33rem 1.06rem 0;
            background-color:#1B82D1;
            color:#fff;
            padding-left:14px;
            padding-right:14px;
            box-sizing:border-box;
            font-size:2.67rem;
            text-align:center;
            text-decoration:none;
            line-height:2.55555556;
            border-radius:5px;
            -webkit-tap-highlight-color:transparent;
            overflow:hidden;
            display:inline-block;
            flex:1;
            -webkit-flex: 1;

        }

        .rules{
            position: fixed;
            z-index:1001;
            width:80%;
            height:80%;
            overflow-y: auto;
            top:10%;
            left:10%;
            background-color:#fff;
            box-sizing:border-box;
            padding:2.12rem 1.08rem 0 1.08rem;
        }
        .rules_area{
            width:100%;
            height:100%;
            overflow: scroll;
        }
        .rules_title{
            text-align: center;
            font-size:3rem;

        }
        .rules_content{
            color:#6e6e6e;
            font-size:2.5rem;
            line-height: 4rem;
        }
        .rules_btn{
            margin: 1.34rem auto;
            background-color:#1B82D1;
            color:#fff;
            font-size:2.5rem;

            border-radius: 0.42rem;
        }

        .return_top{
            width:4.26rem;
            height:4.26rem;
            position: fixed;
            bottom:21%;
            right:1.6rem;

        }

        .hide{
            display:none;
        }

        .file{
            display: none;
        }

    </style>
</head>
<body>
<div class="wrap">
    <div class="release">
        <div class="modal_title">{$title}</div>
        <div class="tip">
            <span>{$ask}</span>
        </div>
        <div class="example">
            <div class="swiper" indicator-dot="true" autoplay="true">
                <!--<div class="swiper-item" wx:for="{example}" wx:key="example.file">-->
                <!--<img src="{item.thumb}" class="swiper_imgs" wx:if="{item.is_video==0}"/>-->
                <!--<video src="{item.file}" class="" objectFit='cover' wx:if="{item.is_video==1}" controls='true' style="width:100%;height:100% " hidden="{video_fill}" ></video>-->
                <!--</div>-->
            </div>
        </div>
        <div class="upload_btn">
            <button class="btn sub weui-btn weui-btn_default" data-assess="{$assess}" data-aid="{$aid}" data-title="{$title}" data-class_type="{$class_type}" data-term="{$term}">上　传</button>
            <form action="https://x.g56.cn/assess/file_upload" method="post" enctype="multipart/form-data" style="display:none;" class="form">
                <input type="text" name="pid" value="{$pid}"/>
                <input type="text" name="assess" class="f_assess" value="{$assess}"/>
                <input type="text" name="type" class="f_type"  value="{$aid}"/>
                <input type="text" name="class_type" class="f_class_type"  value="{$class_type}"/>
                <input type="text" name="term" class="f_term"  value="{$term}"/>
                <input type="file" name="file" class="file" />
            </form>
        </div>
        <div id="loadingToast" style=" display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content">数据加载中</p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var uploading=false;
     
        $(".sub").on('click',function(){
         
            $(".file").click();
        });



        $(".file").on('change', function(){
            if($('.file').val()){
                if(uploading==true){
                    console.log('上传中');
                    return;
                }
               // showLoading();
                $.ajax({
                    url: "/assess/file_upload",
                    type: 'POST',
                    cache: false,
                    data: new FormData($('.form')[0]),
                    processData: false,
                    contentType: false,
                    dataType:"json",
                    beforeSend: function(){
                        uploading = true;
                    },
                    success : function(data) {
                        if (data.err == 0) {
                            var assess=$('.btn').attr('data-assess');
                            var type=$('.btn').attr('data-aid');
                            var class_type=$('.btn').attr('data-class_type');
                            var term=$('.btn').attr('data-term');

                            // '<div class="img_box"><div class="img_name">'+data.name+'</div></div>'


                            $(".file").val('')

                            uploading = false;
                            wx.miniProgram.navigateBack({
                                delta: 1
                            })

                        } else {
                            alert(data.msg);
                        }
                        //hideLoading();



                    },
                    error:function(e){
                        uploading = false;
                        alert('网络错误');

                    }
                });
            }
        });

        function showLoading(){

            let a=$("#loadingToast");
            if (a.css('display') != 'none') return;

            a.fadeIn(100);
            // setTimeout(function(){
            //     $(this).fadeOut(100);
            // }, 2000);

        }
        function hideLoading(){

            if ($("#loadingToast").css('display') == 'none') return;
            $("#loadingToast").fadeOut(100);

        }


    })

</script>

</body>
</html>